<!doctype html>
<html>
  <head>
    <title>event path</title>
    <script src="../../polymer.js"></script>
    <script src="../../tools/test/htmltest.js"></script>
    <script src="../../node_modules/chai/chai.js"></script>
  </head>
  <body>

  <x-base></x-base>
  
  <x-extendor></x-extendor>
  
  <polymer-element name="x-base">
    <script>
      Polymer('x-base', {
        ready: function() {
          this.isReadied = true;
        },
        inserted: function() {
          this.isInserted = true;
        },
        removed: function() {
          this.isRemoved = true;
        },
        attributeChanged: function() {
          this.hasAttributeChanged = true;
        }
      });
    </script>  
  </polymer-element>
  
  <polymer-element name="x-extendor" extends="x-base">
    <script>
      Polymer('x-extendor', {
        ready: function() {
          this.extendedIsReadied = true;
          this.super();
        },
        inserted: function() {
          this.extendedIsInserted = true;
          this.super();
        },
        removed: function() {
          this.extendedIsRemoved = true;
          this.super();
        },
        attributeChanged: function() {
          this.extendedHasAttributeChanged = true;
          this.super();
        }
      });
    </script>  
  </polymer-element>
 
  <script>
    document.addEventListener('WebComponentsReady', function() {
      var xBase = document.querySelector('x-base');
      chai.assert.equal(xBase.isReadied, true);
      chai.assert.equal(xBase.isInserted, true);
      xBase.setAttribute('foo', 'foo');
      chai.assert.equal(xBase.hasAttributeChanged, true);
      
      var xExtendor = document.querySelector('x-extendor');
      chai.assert.equal(xExtendor.isReadied, true);
      chai.assert.equal(xExtendor.extendedIsReadied, true);
      chai.assert.equal(xExtendor.isInserted, true);
      chai.assert.equal(xExtendor.extendedIsInserted, true);
      xExtendor.setAttribute('foo', 'foo');
      chai.assert.equal(xExtendor.hasAttributeChanged, true);
      chai.assert.equal(xExtendor.extendedHasAttributeChanged, true);
      
      xBase.parentNode.removeChild(xBase);
      xExtendor.parentNode.removeChild(xExtendor);
      
      setTimeout(function() {
        chai.assert.equal(xBase.isRemoved, true);
        chai.assert.equal(xExtendor.isRemoved, true);
        chai.assert.equal(xExtendor.extendedIsRemoved, true);
        done();
      });
    });
  </script>
  </body>
</html>
